<template>
  <div class="safety-incident-analysis">
    <a-card class="analysis-card">
      <div class="report-header">
        <div class="icon-wrapper">
          <WhaleOutlined style="font-size: 24px; color: #1890ff;" />
        </div>
        <h1>出租车行业隐患事件变化趋势分析报告</h1>
      </div>

      <a-divider />

      <div class="report-section">
        <h2>1. 引言</h2>
        <p>出租车行业作为城市交通的重要组成部分，其安全性和服务质量直接关系到乘客的出行体验和城市交通秩序。近年来，随着技术的进步和监管的加强，出租车行业的隐患事件发生率和类型也在不断变化。本报告旨在分析出租车行业隐患事件的变化趋势，并提出相应的改进建议。</p>
      </div>

      <div class="report-section">
        <h2>2. 数据来源与方法</h2>
        <p>本报告基于过去五年的出租车行业相关数据，包括交通事故记录、乘客投诉、司机违规行为等。数据来源包括交通管理部门、出租车公司内部记录以及第三方调查机构，分析方法包括时间序列分析、回归分析和聚类分析。</p>
      </div>

      <div class="report-section">
        <h2>3. 隐患事件类型</h2>
        <a-list :data-source="incidentTypes">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-typography-text>
                <strong>{{ item.title }}:</strong> {{ item.description }}
              </a-typography-text>
            </a-list-item>
          </template>
        </a-list>
      </div>

      <div class="report-section">
        <h2>4. 变化趋势分析</h2>
        <!-- 这里可以添加图表组件 -->
      </div>

      <a-row class="message-input" :gutter="16">
        <a-col :span="20">
          <a-input v-model:value="message" placeholder="给 DeepSeek 发送消息" />
        </a-col>
        <a-col :span="4">
          <a-button-group>
            <a-button type="primary">
              <template #icon>
                <SendOutlined />
              </template>
            </a-button>
            <a-button>
              <template #icon>
                <PaperClipOutlined />
              </template>
            </a-button>
          </a-button-group>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')

const incidentTypes = [
  {
    title: '交通事故',
    description: '包括碰撞、追尾、侧翻等。'
  },
  {
    title: '服务质量问题',
    description: '包括拒载、绕路、态度恶劣等。'
  },
  {
    title: '司机违规行为',
    description: '包括酒驾、疲劳驾驶、超速等。'
  },
  {
    title: '车辆故障',
    description: '包括刹车失灵、轮胎爆裂等。'
  }
]
</script>

<style scoped>
.safety-incident-analysis {
  padding: 24px;
}

.analysis-card {
  background: #fff;
  border-radius: 8px;
}

.report-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #e6f7ff;
  border-radius: 50%;
}

.report-header h1 {
  margin: 0;
  font-size: 24px;
  color: #1f1f1f;
}

.report-section {
  margin-bottom: 32px;
}

.report-section h2 {
  font-size: 18px;
  color: #1f1f1f;
  margin-bottom: 16px;
}

.report-section p {
  color: #595959;
  line-height: 1.6;
}

.message-input {
  margin-top: 24px;
}

:deep(.ant-list-item) {
  padding: 12px 0;
}
</style> 